<template>
    <div class="app-model">
        <van-nav-bar
                title="推广"
                left-arrow
                @click-left="$router.go(-1)"
        />
        <van-row>
            <van-col span="24">
                <div class="title">
                    <img src="./bgc.png">
                    <div class="title-mark"></div>
                    <div class="title-detail" @click="link">
                        <p>
                            <van-icon name="label-o" color="#fff" size="26px"/>
                        </p>
                        <p style="color: #ffffff;font-size: 12px">明细</p>
                    </div>
                    <div class="title-content">
                        <p>我的模豆</p>
                        <p>{{ info.myModelBean }}</p>
                        <div class="title-bottom">
                            <span>总金额：{{ info.totalMoney }}</span>
                            <span></span>
                            <span>提现中金额：{{ info.withdrawalIngMoney }}</span>
                        </div>
                    </div>
                </div>
            </van-col>
        </van-row>
        <van-row justify="center" class="van-row-all" align="center">
            <van-col class="van-col-item" span="10" v-for="(tag,index) in tags" :offset="tag.offset">
                <van-icon :name="tag.iconName" size="1.5em"/>
                <div @click="toggleTag(index,tag.componentName)">
                <p>{{ tag.name }}</p>
            </div>
                <span class="d4" :style="tag.d4Style" v-show="tag.d4Show"></span>
            </van-col>
        </van-row>

        <van-row>
            <van-col span="22" offset="1" style="margin-top: 20px">
                <component :is="mainShow" class="main"></component>
            </van-col>
        </van-row>

    </div>
</template>

<script>
    import MyTeam from '@/views/bean/compontens/myTeam'
    import ModelReward from '@/views/bean/compontens/modelReward'
    import { myteaminfo } from '@/api/api';

    export default {
        name: 'Bean',
        components: {
            MyTeam,
            ModelReward
        },
        data() {
            return {
                tags: [
                    {
                        componentName: 'myTeam',
                        offset: 1,
                        iconName: 'cluster-o',
                        d4Style: {borderTopColor: '#FBD489'},
                        d4Show: true,
                        name: '我的团队'
                    },
                    {
                        componentName: 'modelReward',
                        offset: 2,
                        iconName: 'balance-o',
                        d4Style: {borderTopColor: '#A0CDEE'},
                        d4Show: false,
                        name: '模豆奖励'
                    }
                ],
                mainShow: 'myTeam',
                info:{}
            };
        },
        methods: {
            toggleTag(index, componentName) {
                if (index) {
                    this.tags[index].d4Show = true
                    this.tags[index - 1].d4Show = false
                } else {
                    this.tags[index].d4Show = true
                    this.tags[index + 1].d4Show = false
                }
                this.mainShow = componentName
            },
            link(){
                this.$router.push({name:'beandetail'})
            }
        },
        created() {
            myteaminfo({}).then(res => {
                this.info = res.data.data
                console.log(this.info,'aaa')
            })
        }
    }
</script>


<style scoped>

    .main {
        min-height: 500px;
        background-color: #fff;

    }

    .d4 {
        position: absolute;
        border-width: 10px;
        border-style: solid;
        border-bottom-color: transparent;
        border-right-color: transparent;
        border-left-color: transparent;
        bottom: -20px;
        left: 50%;
        margin-left: -10px;
    }

    .van-row-all {
        text-align: center;
        margin-top: 10px;
    }

    .van-col-item:nth-of-type(1) {
        background-color: #FBD489;
    }

    .van-col-item:nth-of-type(2) {
        background-color: #A0CDEE;
    }

    .van-col-item {
        padding: 20px;
        color: #f2f2f2;
        height: 100%;
        position: relative;
    }

    .title {
        height: 200px;
        position: relative;
        overflow: hidden;
    }

    .title > img {
        width: 100%;
        height: 100%;
    }

    .title-mark {
        width: 100%;
        height: 200px;
        background-color: rgba(226, 65, 106, 0.5);
        position: absolute;
        top: 0;
        z-index: 2;
    }

    .title-content {
        width: 100%;
        position: absolute;
        z-index: 3;
        top: 40%;
        margin-top: -10px;
        color: #ffffff;
        text-align: center;
    }

    .title-content > p:nth-of-type(2) {
        font-size: 26px;
    }

    .title-bottom {
        width: 100%;
        height: 50px;
        margin-top: 20px;
        display: flex;
        justify-content: space-around
    }

    .title-bottom > span {
        width: 40%;
        height: 100%;
        text-align: center;
    }

    .title-bottom > span:nth-of-type(2) {
        width: 1px;
        height: 50%;
        background-color: #fff;
    }

    .title-detail {
        width: 50px;
        height: 50px;
        position: absolute;
        z-index: 3;
        top: 10px;
        right: 5px;
        text-align: center;
    }
</style>


